React useSyncExternalStore: Zvládnutí integrace externího stavu

Hook useSyncExternalStore, zavedený v Reactu 18, poskytuje výkonný a efektivní způsob, jak integrovat externí datové zdroje a knihovny pro správu stavu do vašich React komponent. Tento hook umožňuje komponentám přihlásit se k odběru změn v externích úložištích, čímž zajišťuje, že uživatelské rozhraní vždy odráží nejnovější data a zároveň optimalizuje výkon. Tento průvodce poskytuje komplexní přehled useSyncExternalStore, pokrývající jeho základní koncepty, vzorce použití a osvědčené postupy.

Pochopení potřeby useSyncExternalStore

V mnoha React aplikacích narazíte na scénáře, kde je třeba spravovat stav mimo strom komponent. To je často případ při práci s:

• Knihovny třetích stran: Integrace s knihovnami, které spravují svůj vlastní stav (např. připojení k databázi, API prohlížeče nebo fyzikální engine).
• Sdílený stav napříč komponentami: Správa stavu, který je třeba sdílet mezi komponentami, které nejsou přímo propojené (např. stav ověření uživatele, nastavení aplikace nebo globální sběrnice událostí).
• Externí datové zdroje: Načítání a zobrazování dat z externích API nebo databází.

Tradiční řešení pro správu stavu, jako jsou useState a useReducer, jsou dobře uzpůsobena pro správu lokálního stavu komponent. Nejsou však navržena tak, aby efektivně zpracovávala externí stav. Jejich přímé použití s externími datovými zdroji může vést k problémům s výkonem, nekonzistentním aktualizacím a složitému kódu.

useSyncExternalStore řeší tyto problémy tím, že poskytuje standardizovaný a optimalizovaný způsob, jak se přihlásit k odběru změn v externích úložištích. Zajišťuje, že komponenty jsou znovu vykresleny pouze tehdy, když se změní relevantní data, čímž minimalizuje zbytečné aktualizace a zlepšuje celkový výkon.

Základní koncepty useSyncExternalStore

useSyncExternalStore přijímá tři argumenty:

1. subscribe: Funkce, která jako argument přijímá callback a přihlašuje se k odběru externího úložiště. Callback bude volán vždy, když se změní data úložiště.
2. getSnapshot: Funkce, která vrací snímek dat z externího úložiště. Tato funkce by měla vrátit stabilní hodnotu, kterou React může použít k určení, zda se data změnila. Musí být čistá a rychlá.
3. getServerSnapshot (volitelné): Funkce, která vrací počáteční hodnotu úložiště během vykreslování na straně serveru. To je klíčové pro zajištění, aby počáteční HTML odpovídalo vykreslování na straně klienta. Používá se POUZE v prostředích vykreslování na straně serveru. Pokud je vynechána v prostředí na straně klienta, místo ní se použije getSnapshot. Je důležité, aby se tato hodnota nikdy nezměnila poté, co je poprvé vykreslena na straně serveru.

Zde je podrobný rozbor každého argumentu:

1. subscribe

Funkce subscribe je zodpovědná za navázání spojení mezi React komponentou a externím úložištěm. Přijímá funkci callback, kterou by měla volat vždy, když se změní data úložiště. Tento callback se typicky používá k vyvolání nového vykreslení komponenty.

Příklad:

            const subscribe = (callback) => {
  store.addListener(callback);
  return () => {
    store.removeListener(callback);
  };
};

            

              
                Copy
              
            
          

V tomto příkladu store.addListener přidá callback do seznamu posluchačů úložiště. Funkce vrací funkci pro vyčištění, která odstraní posluchače, když se komponenta odmontuje, čímž zabrání únikům paměti.

2. getSnapshot

Funkce getSnapshot je zodpovědná za načtení snímku dat z externího úložiště. Tento snímek by měl být stabilní hodnotou, kterou React může použít k určení, zda se data změnila. React používá Object.is k porovnání aktuálního snímku s předchozím snímkem. Proto musí být rychlá a je silně doporučeno, aby vracela primitivní hodnotu (řetězec, číslo, boolean, null nebo undefined).

Příklad:

            const getSnapshot = () => {
  return store.getData();
};

            

              
                Copy
              
            
          

V tomto příkladu store.getData vrací aktuální data z úložiště. React porovná tuto hodnotu s předchozí hodnotou, aby určil, zda je třeba komponentu znovu vykreslit.

3. getServerSnapshot (Volitelné)

Funkce getServerSnapshot je relevantní pouze při použití vykreslování na straně serveru (SSR). Tato funkce je volána během počátečního vykreslení na serveru a její výsledek se používá jako počáteční hodnota úložiště předtím, než dojde k hydrataci na straně klienta. Vrácení konzistentních hodnot je pro úspěšné SSR kritické.

Příklad:

            const getServerSnapshot = () => {
  return store.getInitialDataForServer();
};

            

              
                Copy
              
            
          

V tomto příkladu `store.getInitialDataForServer` vrací počáteční data vhodná pro vykreslování na straně serveru.

Příklad základního použití

Podívejme se na jednoduchý příklad, kde máme externí úložiště, které spravuje čítač. Můžeme použít useSyncExternalStore k zobrazení hodnoty čítače v React komponentě:

            // External store
const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

V tomto příkladu createStore vytváří jednoduché externí úložiště, které spravuje hodnotu čítače. Komponenta Counter používá useSyncExternalStore k přihlášení k odběru změn v úložišti a zobrazení aktuálního počtu. Když je kliknuto na tlačítko inkrementace, funkce setState aktualizuje hodnotu úložiště, což spustí nové vykreslení komponenty.

Integrace s knihovnami pro správu stavu

useSyncExternalStore je obzvláště užitečný pro integraci s knihovnami pro správu stavu, jako jsou Zustand, Jotai a Recoil. Tyto knihovny poskytují své vlastní mechanismy pro správu stavu a useSyncExternalStore vám umožňuje je bezproblémově integrovat do vašich React komponent.

Zde je příklad integrace se Zustandem:

            import { useStore } from 'zustand';
import { create } from 'zustand';

// Zustand store
const useBoundStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
}));

// React component
function Counter() {
  const count = useStore(useBoundStore, (state) => state.count);
  const increment = useStore(useBoundStore, (state) => state.increment);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

Zustand zjednodušuje vytváření úložiště. Jeho interní implementace subscribe a getSnapshot jsou implicitně použity, když se přihlásíte k odběru konkrétního stavu.

Zde je příklad integrace s Jotai:

            import { atom, useAtom } from 'jotai'

// Jotai atom
const countAtom = atom(0)

// React component
function Counter() {
  const [count, setCount] = useAtom(countAtom)

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

export default Counter;

            

              
                Copy
              
            
          

Jotai používá atomy ke správě stavu. useAtom interně zpracovává přihlášení k odběru a pořizování snímků.

Optimalizace výkonu

useSyncExternalStore poskytuje několik mechanismů pro optimalizaci výkonu:

• Selektivní aktualizace: React znovu vykreslí komponentu pouze tehdy, když se změní hodnota vrácená funkcí getSnapshot. Tím se zabrání zbytečným opakovaným vykreslením.
• Dávkové aktualizace: React slučuje aktualizace z více externích úložišť do jednoho nového vykreslení. Tím se snižuje počet opakovaných vykreslení a zlepšuje celkový výkon.
• Vyhýbání se zastaralým uzávěrám: useSyncExternalStore zajišťuje, že komponenta má vždy přístup k nejnovějším datům z externího úložiště, a to i při zpracování asynchronních aktualizací.

Pro další optimalizaci výkonu zvažte následující osvědčené postupy:

• Minimalizujte množství dat vrácených funkcí getSnapshot: Vracejte pouze data, která komponenta skutečně potřebuje. Tím se sníží množství dat, které je třeba porovnávat, a zlepší se efektivita procesu aktualizace.
• Použijte memoizační techniky: Memoizujte výsledky drahých výpočtů nebo transformací dat. Tím se zabrání zbytečným přepočtům a zlepší se výkon.
• Vyhněte se zbytečným odběrům: Přihlaste se k odběru externího úložiště pouze tehdy, když je komponenta skutečně viditelná. Tím se může snížit počet aktivních odběrů a zlepšit celkový výkon.
• Zajistěte, aby getSnapshot vrátil nový *stabilní* objekt pouze v případě, že se data změnila: Vyhněte se vytváření nových objektů/polí/funkcí, pokud se podkladová data skutečně nezměnila. Pokud je to možné, vraťte stejný objekt pomocí reference.

Vykreslování na straně serveru (SSR) s useSyncExternalStore

Při použití useSyncExternalStore s vykreslováním na straně serveru (SSR) je klíčové poskytnout funkci getServerSnapshot. Tato funkce zajišťuje, že počáteční HTML vykreslené na serveru odpovídá vykreslování na straně klienta, čímž zabraňuje chybám hydratace a zlepšuje uživatelský zážitek.

Zde je příklad použití getServerSnapshot:

            const createStore = (initialValue) => {
  let value = initialValue;
  const listeners = new Set();

  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };

  const getSnapshot = () => value;

  const getServerSnapshot = () => initialValue; // Important for SSR

  const setState = (newValue) => {
    value = newValue;
    listeners.forEach((listener) => listener());
  };

  return {
    subscribe,
    getSnapshot,
    getServerSnapshot,
    setState,
  };
};

const counterStore = createStore(0);

// React component
import React from 'react';
import { useSyncExternalStore } from 'react';

function Counter() {
  const count = useSyncExternalStore(counterStore.subscribe, counterStore.getSnapshot, counterStore.getServerSnapshot);

  const increment = () => {
    counterStore.setState(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

            

              
                Copy
              
            
          

V tomto příkladu getServerSnapshot vrací počáteční hodnotu čítače. Tím se zajišťuje, že počáteční HTML vykreslené na serveru odpovídá vykreslování na straně klienta. Funkce `getServerSnapshot` by měla vrátit stabilní a předvídatelnou hodnotu. Měla by také provádět stejnou logiku jako funkce getSnapshot na serveru. Vyhněte se přístupu k API specifickým pro prohlížeče nebo globálním proměnným ve funkci getServerSnapshot.

Pokročilé vzorce použití

useSyncExternalStore lze použít v řadě pokročilých scénářů, včetně:

• Integrace s API prohlížeče: Přihlášení k odběru změn v API prohlížeče, jako jsou localStorage nebo navigator.onLine.
• Vytváření vlastních hooků: Zapouzdření logiky pro přihlášení k odběru externího úložiště do vlastního hooku.
• Použití s Context API: Kombinace useSyncExternalStore s React Context API pro poskytování sdíleného stavu stromu komponent.

Podívejme se na příklad vytvoření vlastního hooku pro přihlášení k odběru localStorage:

            import { useSyncExternalStore } from 'react';

function useLocalStorage(key, initialValue) {
  const getSnapshot = () => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.error("Error getting value from localStorage:", error);
      return initialValue;
    }
  };

  const subscribe = (callback) => {
    window.addEventListener('storage', callback);
    return () => window.removeEventListener('storage', callback);
  };

  const setItem = (value) => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
      window.dispatchEvent(new Event('storage')); // Manually trigger storage event for same-page updates
    } catch (error) {
      console.error("Error setting value in localStorage:", error);
    }
  };

  const serverSnapshot = () => initialValue;

  const storedValue = useSyncExternalStore(subscribe, getSnapshot, serverSnapshot);

  return [storedValue, setItem];
}

export default useLocalStorage;

            

              
                Copy
              
            
          

V tomto příkladu je useLocalStorage vlastní hook, který se přihlašuje k odběru změn v localStorage. Používá useSyncExternalStore ke správě odběru a načítání aktuální hodnoty z localStorage. Také správně dispečuje událost úložiště, aby zajistil, že se aktualizace na stejné stránce projeví (protože události `storage` se spouštějí pouze v jiných záložkách). serverSnapshot zajišťuje správné poskytnutí počátečních hodnot v serverových prostředích.

Osvědčené postupy a časté chyby

Zde jsou některé osvědčené postupy a časté chyby, kterým se vyhnout při používání useSyncExternalStore:

• Vyhněte se přímé mutaci externího úložiště: Vždy používejte API úložiště k aktualizaci dat. Přímá mutace úložiště může vést k nekonzistentním aktualizacím a neočekávanému chování.
• Zajistěte, aby getSnapshot byl čistý a rychlý: Funkce getSnapshot by neměla mít žádné vedlejší účinky a měla by rychle vracet stabilní hodnotu. Nákladné výpočty nebo transformace dat by měly být memoizovány.
• Při použití SSR poskytněte funkci getServerSnapshot: To je klíčové pro zajištění, aby počáteční HTML vykreslené na serveru odpovídalo vykreslování na straně klienta.
• Elegantně zpracujte chyby: Použijte bloky try-catch pro zpracování potenciálních chyb při přístupu k externímu úložišti.
• Vyčištění odběrů: Vždy se odhlaste od externího úložiště, když se komponenta odmontuje, abyste zabránili únikům paměti. Funkce subscribe by měla vrátit funkci pro vyčištění, která odstraní posluchače.
• Pochopte dopady na výkon: Zatímco useSyncExternalStore je optimalizován pro výkon, je důležité pochopit potenciální dopad přihlášení k odběru externích úložišť. Minimalizujte množství dat vrácených funkcí getSnapshot a vyhněte se zbytečným odběrům.
• Důkladně testujte: Zajistěte, aby integrace s úložištěm fungovala správně v různých scénářích, zejména při vykreslování na straně serveru a v souběžném režimu.

Závěr

useSyncExternalStore je výkonný a efektivní hook pro integraci externích datových zdrojů a knihoven pro správu stavu do vašich React komponent. Díky pochopení jeho základních konceptů, vzorců použití a osvědčených postupů můžete efektivně spravovat sdílený stav ve svých React aplikacích a optimalizovat výkon. Ať už integrujete s knihovnami třetích stran, spravujete sdílený stav napříč komponentami, nebo načítáte data z externích API, useSyncExternalStore poskytuje standardizované a spolehlivé řešení. Přijměte ho k vytváření robustnějších, udržitelnějších a výkonnějších React aplikací pro globální publikum.

Další zdroje

• React dokumentace k useSyncExternalStore
• React 18 Pull Request představující useSyncExternalStore
• Knihovna pro správu stavu Zustand
• Knihovna pro správu stavu Jotai